<template>
	<view class="participant-wrap mc-columns mc-flex-vcenter">
		<image src="../../../static/images/ui_guanggao.png" mode="widthFix" class="partake" v-if="!isPartake"></image>
		<form @submit="setFormId" report-submit="true" v-if="!isLottery">
			<button form-type="submit" type="primary" class="partake-btn" hover-class="none" disabled style="background-color: #eb977d;" v-if="isPartake">已参与</button>
			<button form-type="submit" class="btn partake-btn" hover-class="none" type="primary" @tap="draw" v-else>参与抽奖</button>
		</form>
		<form @submit="setFormId" report-submit="true">
			<button form-type="submit" class="formId-btn mc-flex-center mc-flex-vcenter margin-top36">
				<view class="color-white mc-f12" @tap="toParticipant">
					<text v-if="!isLottery">已有 {{total}} 人参与，查看全部</text>
					<text v-else>感谢 {{total}} 位朋友的参与，点击可查看所有参与用户</text>
				</view>
				<image src="../../../static/images/right-arrow.png" mode="widthFix" style="width: 28rpx;margin-left: 10rpx;"></image>
			</button>
		</form>
		<view class="mc-flex-center mc-wrap margin-top36">
			<image :src="item.photo" mode="aspectFill" class="avatar" v-for="(item,index) in list" :key="index" v-if="index<35"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	export default {
		props: {
			shareUserId: {
				type: String,
				default: ''
			},
			info: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				prizeId: '',
				list: [],
				total:0,
			}
		},
		computed: {
			isPartake: function() {
				return this.info.isPartake ? true : false
			},
			isLottery: function() {
				return this.info.isLottery ? true : false
			}
		},
		methods: {
			...mapActions('draw', ['participantListUp']),
			draw() {
				if (this.isPartake) return
				console.log('签到btn');
				this.$store.dispatch('videoAd/show', {
					success: () => {
						this.saveDraw();
					},
					fail: () => {
						uni.showToast({
							title: '播放失败',
							icon: 'none'
						});
					}
				});
			},
			// 参与用户列表
			async getDrawUserList(prizeId) {
				this.prizeId = prizeId || this.prizeId
				let res = await this.$api.draw.getDrawUserList({
					prizeId: this.prizeId,
					page:1,
					rows:35
				}) || {}
				console.log('drawUserList', res)
				this.list = res.list || [];
				this.total = res.total || 0;
				// this.participantListUp(this.list)
			},
			// 参与抽奖
			async saveDraw() {
				const data = {
					prizeId: this.prizeId
				};
				if (this.shareUserId) {
					Object.assign(data, {
						inviteUserId: this.shareUserId
					})
				}
				let res = await this.$api.draw.partakeDraw(data);
				this.getDrawUserList()
				this.$emit('refresh')
			},
			toParticipant() {
				if (this.list.length == 0) return
				uni.navigateTo({
					url: '/pages/draw/participant/participant?prizeId='+this.prizeId
				})
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.participant-wrap {
		position: relative;
		width: 690rpx;
		margin: 30rpx auto;
		z-index: 9;
		background-color: #2e2c83;
		border-radius: 10rpx;
		padding: 50rpx;

		.partake-btn {
			background-color: #e35a2e;
			width: 180rpx;
			height: 180rpx;
			line-height: 180rpx;
			font-size: 30rpx;
			padding: 0;
			border-radius: 1000px;
		}

		.btn {
			animation: btn 1.5s infinite;
		}

		@keyframes btn {
			0% {
				transform: scale(1);
			}

			30% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}
	}

	.partake {
		position: absolute;
		width: 376rpx;
		top: -40rpx;
		left: 50%;
		margin-left: -188rpx;
		z-index: 99;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
	}
</style>
